<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>登录界面</title>
  <link rel="stylesheet" th:href="@{/css/layui.css}">
</head>
<body>
<div class="layui-card">
  <div class="layui-card-header">登录界面</div>
  <div class="layui-card-body">
    <div class="layui-form">
      <form class="layui-form" method="post" th:action="@{/login}">
        <div class="layui-form-item">
          <label class="layui-form-label">输入框</label>
          <div class="layui-input-block">
            <input width="50%" type="text" required  lay-verify="required" placeholder="请输入您的账号!" autocomplete="off" class="layui-input"
                   id="username" name="username">
            <div class="invalid-feedback" th:text="${userameMsg}">
              该账号不存在!
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码框</label>
          <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            <div class="invalid-feedback" th:text="${passwordMsg}">
              密码不正确
            </div>
          </div>
          <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
          </div>
        </div>
      </form>
    </div><br>

  </div>
</div>

<script th:src="@{/layui.js}"></script>
<script>
  //Demo
  // layui.use('form', function(){
  //   var form = layui.form;

    //监听提交
  //   form.on('submit(formDemo)', function(data){
  //     layer.msg(JSON.stringify(data.field));
  //     return false;
  //   });
  // });
</script>
</body>
</html>